{include file="public/header"}
    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
        .dateil {          
            font-size: 16px;
            font-weight: 700;
            width: 98%;
        }
       .dateils {           
            display: flex;
            justify-content: flex-end;
        }
       .data{
            width: 100%;
            display: flex;
            
        }
    </style>
    {include file="public/style"}
            <el-card style="width: 98%;" >   
                <el-breadcrumb separator="/">
                    <el-breadcrumb separator="/">
                        <el-page-header @back="goBack"  content="订单详情"></el-page-header>
                    </el-breadcrumb>        
                </el-breadcrumb>
            </el-card>
            <br> 
            <el-card style="width: 98%;" v-for="(item,index) in list">   
               <div class="dateil">订单信息:</div>
                 <el-divider></el-divider>
                <el-row>
               
                        <el-col :span="12"  >                         
                            <el-card style="width: 98%;">
                                <div class="data">
                                     <div class="dateil">订单信息:</div>
                                     <div class="dateils" >  <el-button   size="small"  icon="el-icon-edit" >修改快递渠道</el-button>       </div>
                                </div>
                                <el-divider></el-divider>           
                                <el-row>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 订单号:{{item.orderid}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 发货单号:{{item.id}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 发货仓库:{{item.storage_name}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 发货状态:{{item.status}} </div>                                     
                                    </el-col>
                                     <el-col :span="6">
                                        <div style="line-height: 38px;"> 物流渠道:{{item.storage_name}}  </div>                                     
                                    </el-col>
                                    <el-col :span="7">
                                        <div style="line-height: 38px;"> 物流单号:{{item.trackingno}}  </div>                                     
                                    </el-col>                                  
                                </el-row>
                            </el-card>
                       </el-col>

                        <el-col :span="12" >
                            <el-card style="width: 98%;">
                                  <div class="data">
                                     <div class="dateil">客户信息:</div>
                                     <div class="dateils" >  <el-button   size="small"  icon="el-icon-edit" >修改客户地址</el-button>       </div>
                                </div>
                                <el-divider></el-divider>                 
                                <el-row>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 收货姓名:{{item.contactperson}}  </div>                                     
                                    </el-col>
                                     <el-col :span="6">
                                        <div style="line-height: 38px;"> 收货邮编:{{item.postcode}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 电话号码:{{item.phone}} </div>                                     
                                    </el-col>
                                     <el-col :span="6">
                                        <div style="line-height: 38px;"> 收货国家:{{item.country}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 收货省份:{{item.province}} </div>                                     
                                    </el-col>
                                    <el-col :span="6">
                                        <div style="line-height: 38px;"> 收货城市:{{item.city}} </div>                                     
                                    </el-col>
                                    <el-col :span="8">
                                        <div style="line-height: 38px;"> 收货地址:{{item.detailaddress}} </div>                                     
                                    </el-col>
                                   
                                </el-row>
                            </el-card>
                       </el-col>
                </el-row>
                    <el-table  :data="item.children"   border style="width: 100%;margin-top: 30px;">
                        <el-table-column prop="localsku"  label="localsku" min-width="110" > 
                               <template v-slot="{row}">
                                    <div style="line-height: 38px;">localsku:{{row.localsku}}</div>
                                     <div style="line-height: 38px;">sellersku:{{row.sellersku}}</div>
                                </template>
                        </el-table-column>            
                        <el-table-column prop="smallimage"  label="产品图片" min-width="50">  
                            <template v-slot="{row}">
                                <el-image :preview-teleported="true" :z-index="999999" :src="row.smallimage" style="width:150;height:80px" :preview-src-list="[row.smallimage]" /></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="count"  label="数量"  max-width="180">    </el-table-column>
                        <el-table-column prop="unitprice"  label="价格"  max-width="180">    </el-table-column>
                        <el-table-column prop="code"  label="产品标识码" max-width="80">    </el-table-column>
                        <el-table-column prop="num"  label="库存数">    </el-table-column>
                         <el-table-column  fixed="right" label="操作" width="140">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain icon="el-icon-edit" >拆分订单 </el-button>    
                        </template>
                    </el-table-column>
                    </el-table>
            </el-card>
              <br> 
           <el-card style="width: 98%; ">
                <div class="dateil">订单处理过程:</div>
                <el-divider></el-divider>
                <div class="block">
                    <el-timeline :reverse="false" >                      
                    <el-timeline-item v-for="(item) in logs" :key="item.createtime" :timestamp="item.createtime"  placement="bottom" color="#C0C4CC">
                        <span v-html="item.content"></span>
                    </el-timeline-item>
                    </el-timeline>
                </div>
           </el-card>
        </div>       

        <script>
            new Vue({
                el: '#app',
                data: function () {
                    return {               
                        checkedKeys:[],
                        list: [],
                        logs:[],
                        searchForm:{
                            orderid: {$orderid},
                        },
                        createForm:{
                            rules:[],       
             
                
                        },  
                    }
                },
                mounted(){           
           
                this.getlist()
                },
                methods: {        
                    //返回上一个页面
                    goBack() {              
                        window.location.href = '/admin/order/index';
                    },                   
                 
                    async getlist() {
                        let loading = this.$loading({
                            lock: true,
                            text: '数据加载中···',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        const res = await axios.post('/admin/order/dateil', {params: this.searchForm})
                        loading.close()
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }  
                        this.list = res.info.list
                        this.logs = res.info.logs                      
                    },                  
                
                    //确认提交修改
                    async checkSubmits(){
                        this.$refs.refsearchForm.validate(async valid => {
                            if (!valid) return;
                            let loading = this.$loading({
                                lock: true,
                                text: '数据加载中···',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                                    });
                            axios.post('/admin/authgroups/create_purview', {params: this.createForm}).then(res => {
                                loading.close()
                                if (res.status !== 1) {
                                    return this.$message.error(res.info);                  
                                }
                            
                                this.$message.success('操作成功');
                                this.ismenudialogVisible = false
                                this.getlist()
                            }).catch(err => {
                                console.log(err)
                            })
                        })
                    },
                
                }
            })
        </script>
    </body>  
</html>
